import React from 'react';
import classNames from 'classnames';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Anchor, Content, Card } from 'react-fule-ui';
import './index.scss';
import {
  CssVar,
  JsVariable,
  JsVpadLeft,
  JsVdata,
  JsID,
  JsChineseNumeral,
} from './test';

export default function FuleUtility(props) {
  const path = props.match.path;
  const urlPath = `${props.location.pathname}${props.location.search}`;
  const AnchorData = [
    {
      title: 'SCSS - 变量公共主题色',
    },
    {
      title: 'JS - 组件前缀',
    },
    {
      title: 'JS - 小于10的数个位数补0',
    },
    {
      title: 'JS - 获取设置区间数组',
    },
    {
      title: 'JS - 生成随机数据ID',
    },
    {
      title: 'JS - 整数小写转大写数字',
    },
  ];
  return (
    <Content>
      <Content.Header ceiling>公共部分</Content.Header>
      <Content.Body>
        <Anchor ceiling>
          {AnchorData.map((item, index) => (
            <Anchor.Item
              path={path}
              urlPath={urlPath}
              cid={`${path}?${index + 1}`}
              index={index + 1}
              key={`anchor-${index}`}
            >
              {item.title}
            </Anchor.Item>
          ))}
        </Anchor>
        <Card
          id={`${path}?1`}
          className={classNames(
            'utility-h3',
            `${path}?1` === urlPath || path === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[0].title}</Card.Header>
          <Card.Body>
            <Sitem value={CssVar} />
          </Card.Body>
        </Card>
        <Card
          id={`${path}?2`}
          className={classNames(
            'utility-h3',
            `${path}?2` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[1].title}</Card.Header>
          <Card.Body>
            <Sitem value={JsVariable} />
          </Card.Body>
        </Card>
        <Card
          id={`${path}?3`}
          className={classNames(
            'utility-h3',
            `${path}?3` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[2].title}</Card.Header>
          <Card.Body>
            <Sitem value={JsVpadLeft} />
          </Card.Body>
        </Card>
        <Card
          id={`${path}?4`}
          className={classNames(
            'utility-h3',
            `${path}?4` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[3].title}</Card.Header>
          <Card.Body>
            <Sitem value={JsVdata} />
          </Card.Body>
        </Card>
        <Card
          id={`${path}?5`}
          className={classNames(
            'utility-h3',
            `${path}?5` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[4].title}</Card.Header>
          <Card.Body>
            <Sitem value={JsID} />
          </Card.Body>
        </Card>
        <Card
          id={`${path}?6`}
          className={classNames(
            'utility-h3',
            `${path}?6` === urlPath ? 'is-actived' : ''
          )}
        >
          <Card.Header>{AnchorData[5].title}</Card.Header>
          <Card.Body>
            <Sitem value={JsChineseNumeral} />
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
function Sitem(props) {
  const {
    value, // 自定义类名
  } = props;
  return (
    <ReactMarkdown
      children={value}
      components={{
        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || '');
          return !inline && match ? (
            <SyntaxHighlighter
              children={String(children).replace(/\n$/, '')}
              style={vscDarkPlus}
              language={match[1]}
              PreTag="div"
              className="fl-syntaxHighlighter--div"
              {...props}
            />
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    />
  );
}
